<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>VerminMUD Web client</title>
    <style type="text/css">
      SPAN.fg1 { color: black; }
      SPAN.fg2 { color: silver; }
      SPAN.fg3 { color: maroon; }
      SPAN.fg4 { color: green; }
      SPAN.fg5 { color: navy; }
      SPAN.fg6 { color: purple; }
      SPAN.fg7 { color: teal; }
      SPAN.fg8 { color: orange; }

      SPAN.fg1b { color: gray; }
      SPAN.fg2b { color: white; }
      SPAN.fg3b { color: red; }
      SPAN.fg4b { color: lime; }
      SPAN.fg5b { color: blue; }
      SPAN.fg6b { color: fuchsia; }
      SPAN.fg7b { color: aqua; }
      SPAN.fg8b { color: yellow; }
      
      SPAN.bg1 { background-color: black; }
      SPAN.bg2 { background-color: white; }
      SPAN.bg3 { background-color: red; }
      SPAN.bg4 { background-color: green; }
      SPAN.bg5 { background-color: blue; }
      SPAN.bg6 { background-color: purple; }
      SPAN.bg7 { background-color: teal; }
      SPAN.bg8 { background-color: yellow; }

	  DIV.textview {
	    width: 500px; 
	    height: 400px; 
	    overflow: auto;
	    font-family: monospace;
	    color: silver;
	    background-color: black;
	    
	  	white-space: pre; /* CSS2 */
		white-space: -moz-pre-wrap; /* Mozilla */
		white-space: -hp-pre-wrap; /* HP printers */
		white-space: -o-pre-wrap; /* Opera 7 */
		white-space: -pre-wrap; /* Opera 4-6 */
		white-space: pre-wrap; /* CSS 2.1 */
		white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
		word-wrap: break-word; /* IE */
	  }
    </style>

    <!-- Add stylesheets for Gauge component -->
    <link href="ui/gauge.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript">
      var wicca = {};
      function getWiccaMethod(component, method) {
		return wicca[component][0] + "." + wicca[component][method+1];
	  }
	  
      function doLogin() {
        var username = document.forms[0].player.value;
        var password = document.forms[0].password.value;
        document.connection.login( username, password );
      }
      
      var recall = new Array;
      var lastRecall = -1; // the last inserted line
      var currentRecall = -1; // the line currently being moved through

      function doInput() {
        var inp = document.forms[1]['game-input'];
        document.connection.put(inp.value);
        lastRecall = (++lastRecall)%500;
        recall[lastRecall] = inp.value;
        currentRecall = lastRecall+1;
        inp.value = '';
        return false;
      }

      function browseRecall(evt) {
         if(recall.length == 0)
            return;
         if(evt.keyCode == evt.DOM_VK_UP)
           browseRecallUp();
         else if(evt.keyCode == evt.DOM_VK_DOWN)
           browseRecallDown();
      }

      function browseRecallUp() {
         var idx = currentRecall-1;
         if(idx < 0) idx = recall.length-1;

         currentRecall = idx;
         var txt = recall[idx];
         document.forms[1]['game-input'].value = txt;
      }

      function browseRecallDown() {
         var idx = currentRecall+1;
         if(idx > lastRecall)
           idx = lastRecall;
         currentRecall = idx;
         var txt = recall[idx];
         document.forms[1]['game-input'].value = txt;
       }

    </script>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="ui/textview.js"></script>
    <script type="text/javascript" src="ui/gauge.js"></script>
    <script type="text/javascript" src="Output.js"></script>
    <script type="text/javascript" src="Chat.js"></script>
    <script type="text/javascript" src="System.js"></script>
    <script type="text/javascript" src="State.js"></script>
    <script type="text/javascript" src="Battle.js"></script>

    <script type="text/javascript">
      window.onload = function() {
        State.initialize();
        Battle.initialize();
      }
    </script>
  </head>
    
    <body>
      <h3>VerminMUD Web client</h3>
      <applet width="0" height="0" MAYSCRIPT code="org.vermin.wicca.web.ClientApplet" name="connection">
	<param name="port" value="8069" />
      </applet>
      
      <form id="login-form">
	login: <input type="text" name="player">
	password: <input type="password" name="password">
	<a href="#" onclick="doLogin()">GO</a>
      </form>
      
      <div style="width:640px; height: 70px; display: none;" id="chat-output">
      </div>

      <div style="width:640px;" id="game-output" class="textview">
      </div>
      <div style="border: 1px solid black; width:640px;">
	<div ID="player_battle_display" style="height: 48px; text-align: right; background-image: url('graf/player_text.png'); background-repeat: no-repeat; background-position: 5px 5px;"></div>
	<div ID="enemy_battle_display" style="height: 48px; text-align: right; background-image: url('graf/enemy_text.png'); background-repeat: no-repeat;  background-position: 5px 5px;"></div>
      </div>
      <form onsubmit="return doInput()">
	<input type="text" style="width: 640px;" name="game-input" onkeypress="browseRecall(arguments[0])">
	<a href="#" onclick="doInput()">GO</A>
      </form>
      
      <!-- Prompt information (health, spell points, etc) -->
      <div style="width:640px;">
	  <div class="progressbar" style="left: 10px; width:250px;">
	    <div>
	      <div ID="hpbar"></div>
	      <span ID="hptext">&nbsp;</span>
	    </div>
	  </div>
	  <div class="progressbar" style="left: 280px; width:250px;">
	    <div>
	      <div ID="spbar"></div>
	      <span ID="sptext">&nbsp;</span>
	    </div>
	  </div>
      </div>

      <div id="chat-output" style="width: 100%;">
	<div id="chat-tabs"></div>
	<div id="chat-divs"></div>
      </div>
    
    
  </body>
</html>
